<template>
    <rx-layout>
        <div slot="center">
            <a-form :form="form" style="height: 100%;">
                <a-row>
                    <a-col :span="12">
                        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" :label="i18n('form.fieldKey','字段标识')">
                            <a-select :placeholder="i18n('form.fieldKey','字段标识')" :options="fieldDatas" v-decorator="['fieldName',{rules: [{ required: true, message: i18n('form.fieldKey','字段标识','input')}] }]" @change="fieldChange"></a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" :label="i18n('form.prompts','空文本提示')">
                        <rx-input-i18n :placeholder="i18n('form.prompts','空文本提示')" v-decorator="['emptytext']" />
                      </a-form-item>
                    </a-col>
                </a-row>
                <a-row >
                  <a-col :span="24">
                    <a-form-item :label-col="labelCol1" :wrapper-col="wrapperCol1" :label="i18n('form.remarks','字段备注')">
                      <a-input :placeholder="i18n('form.remarks','字段备注')" v-decorator="['fieldLabel',{rules: [{ required: true, message: i18n('form.remarks','字段备注','input')}] }]"/>
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row>
                    <a-col :span="24">
                        <a-form-item :label-col="labelCol1" :wrapper-col="wrapperCol1"  :label="rowi18n('form.default','默认值(开始)')">
                            <div class="mini-input">
                                <a-input-number  :placeholder="rowi18n('form.default','默认值')" v-model="startDefault" />
                                <div style="margin: 0px 10px">{{i18n('form.to','至')}}</div>
                                <a-input-number  :placeholder="rowi18n('form.default','默认值')" v-model="endDefault" />
                            </div>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </div>
    </rx-layout>

</template>

<script>
    import {RxLayout,RxInputI18n} from "@lowcode/jpaas-common-lib";
    import miniQuery from './miniQuery';
    export default {
        name: "miniQuery_numberrange",
        mixins:[miniQuery],
        components:{
            RxLayout,
            RxInputI18n
        },
        data() {
            return {
                startDefault:"",
                endDefault:"",
            }
        },
        methods: {
            i18n(name, text, key) {
                return this.$ti18(name, text, "miniQuery", key);
            },
            rowi18n(name, text, key) {
                return this.$ti18(name, text, "rowControls", key);
            },
            customSetData() {
                var defaultValConf=this.mdl.defaultValConf;
                if(defaultValConf){
                   let defaultVal=JSON.parse(defaultValConf).defaultVal;
                   this.startDefault=defaultVal[0];
                   this.endDefault=defaultVal[1];
                }
            },
            customGetData(){
                var defaultValConf={type:'numberrange',defaultVal:[this.startDefault,this.endDefault]};
                this.mdl.defaultValConf=JSON.stringify(defaultValConf);
            },
            validate(callback) {
                var self=this;
                this.form.validateFields((err, values) => {
                  if(err){
                    return;
                  }
                  if(self.customValidate && !self.customValidate(values)){
                    return;
                  }
                  self.mdl=values;
                  if(self.startDefault>self.endDefault){
                    this.$message.warning("结束值不能低于开始值！");
                    return;
                  }
                  callback();
                });

            },
        },
    }
</script>

<style scoped>
.mini-input{
    display: flex;
    align-items: center;

}
</style>